<template>
    <div
        class="tools"
        :style="{ top: tools.offset.y || 0, right: tools.offset.x || 0 }"
        :type="tools.status || 'top'"
    >
        <p
            class="tools__item"
            v-for="(item, index) in toolsList"
            @click="changetopSelect(index, item.title)"
            :key="index"
        >
            <img
                class="center--hv"
                v-if="selecttopIndex === index"
                :src="item.selectUrl"
                :title="item.title"
            />
            <img
                v-else
                class="center--hv"
                :src="item.url"
                :title="item.title"
            />
        </p>
    </div>
</template>

<script>
import tools from "../lib/tools.js";
export default {
    name: "tools",
    props: {
        tools: {
            type: Object,
            default: () => ({
                list: [],
                status: "top",
                offset: {
                    x: 0,
                    y: 0,
                },
            }),
        },
    },
    data() {
        return {
            toolsList: [],
            selecttopIndex: -1,
            selectIndex: 10,
        };
    },

    mounted() {
        if (this.tools.list) {
            this.toolsList = this.tools.list.map((item) => tools[item]);
        }
    },

    methods: {
        changetopSelect(val, type) {
            this.selecttopIndex = val;
            this.$emit("showTools", type);
        },
        changeSelect(val, type) {
            this.selectIndex = val;
            this.$emit("showTools", type);
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/styles/style.scss"; // global css
.tools {
    position: absolute !important;
    z-index: 50;
    &[type="top"] {
        @include Layout("row");
        height: 38px;
    }
    .tools__item {
        position: relative;
        width: 36px;
        height: 36px;
        background: linear-gradient(
            180deg,
            rgba(0, 43, 108, 0.8) 0%,
            rgba(0, 34, 104, 0.8) 100%
        );
        border: 1px solid #2c608c;
        padding: 0;
        box-sizing: border-box;
        line-height: 52px;
        text-align: center;
        cursor: pointer;
        img {
            line-height: 36px;
        }
    }
}
</style>